body{
    background-color: #dbdde0;
}
.top{
    background-color: #333;
    height: 62px;
    width: 100%;
    display: flex;
    img{
        margin-left: 15%
    }
}
.top2{
    background-color: #222;
    display: flex;
    align-items: center;
    height: 50px;
    .left{
        display: flex;
        justify-content: space-evenly;
        width: 50%;
        span{
            color: white;
            font-size: large;   
        }
        margin-left: 11%;
    }
    .right{
        width: 20%;
        color: white;
        margin-left: 15%;
        display: flex;
        justify-content:space-evenly    
    }
}
.mid{
    width: 70%;
    margin-left: 15%;
    background-color: white;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    .left{
        width: 80%;
        .left1{
            background-color: #dd171f;
            width: 18%;
            height: 50px;
            
            .text1{
                color: white;
                font-size: larger;
                font-weight: 700;
                margin-left: 60%;
            }
            .text2{
                color: #aaa;
                margin-left: 12%;
            }
        }
        .right1{
            width:70% ;
            display: flex;
            justify-content: space-evenly;
            margin-left: 25%;
            .box1{
                .text{
                    display: flex;
                    justify-content: center;
                    margin: 20px;
                    font-size: large;
                }
                border: 1px solid #aaa;
                margin-bottom: 50px;
            }
        }
        .left2{
            background-color: #5c5d5e;
            width: 18%;
            height: 50px;
            .text3{
                color: white;
                font-size: larger;
                font-weight: 700;
                margin-left: 60%;
            }
            .text4{
                color: #aaa;
                margin-left: 30%;
            }
        }
        .right2{
            display: flex;
            justify-content: center;
            align-items: center;
            .left3{
                display: flex;
                flex-direction: column;
                img{
                    width: 300px;
                    margin: 10px;
                    margin-left: 35%;
                }
            }
            .right3{
                display: flex;
                flex-direction: column;
                img{
                    width: 340px;
                    margin: 10px;
                    margin-left: 40%;
                }
            }
        }
    }
    .right{
        background-color: #eee;
        .img2{
            display: flex;
            justify-content: space-evenly;
        }
        .i1{
            display: flex;
            flex-direction: column;
        }
        .i2{
            display: flex;
            flex-direction: column;
        }
        .i3{
            display: flex;
            flex-direction: column;
        }
    }
}